﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>上传文件</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <script src="../../layuiadmin/lib/jquery.min.js"></script>
    <script src="../../layuiadmin/lib/api.js"></script>
</head>
<body>

    <style>
        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }
    </style>
    <div class="layui-fluid">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">图片上传</li>
                <li>文件上传</li>
                 
            </ul>
            <div class="layui-tab-content">
                <!--图片上传-->
                <div class="layui-tab-item layui-show">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">单图上传</div>
                                <div class="layui-card-body">
                                    <div class="layui-upload">
                                        <button type="button" class="layui-btn" id="test-upload-normal">上传图片</button>
                                        <div class="layui-upload-list">
                                            <img class="layui-upload-img" id="test-upload-normal-img">
                                            <p id="test-upload-demoText"></p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">多图上传</div>
                                <div class="layui-card-body">
                                    <div class="layui-upload">
                                        <button type="button" class="layui-btn" id="test-upload-more">多图片上传</button>
                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                            预览图：
                                            <div class="layui-upload-list" id="test-upload-more-list"></div>
                                        </blockquote>
                                        <p id="test-upload-demoText_mul"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--文件上传-->
                <div class="layui-tab-item">
                    <div class="layui-row layui-col-space15">

                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                            <legend>多文件上传</legend>
                        </fieldset>

                        <div class="layui-upload">
                            <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                            <div class="layui-upload-list">
                                <table class="layui-table">
                                    <thead>
                                        <tr>
                                            <th>文件名</th>
                                            <th>大小</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="demoList"></tbody>
                                </table>
                            </div>
                            <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                            
                        </div>

                    </div>
                </div>

            </div>
        </div>

    </div>
        
        <script src="../../layuiadmin/layui/layui.js"></script>
        <script>
            layui.config({
                base: '../../layuiadmin/' //静态资源所在路径
            }).extend({
                index: 'lib/index' //主入口模块
            }).use(['index', 'upload', 'element'], function () {
                var $ = layui.jquery
                    , upload = layui.upload, element = layui.element;
                
                //普通图片上传
                var uploadInst = upload.render({
                    elem: '#test-upload-normal'
                    , url: '/FileMerber/UpLoadFiles'
                    , before: function (obj) {
                        //预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                            $('#test-upload-normal-img').attr('src', result); //图片链接（base64）
                        });
                    }
                    , done: function (res) {
                        
                        //layer.msg(res.messag);
                        if (res.flat == 1) {
                            //上传成功,修改数据库的数据
                            var data = updatefile(res.list);
                            layer.msg(data.message);
                        }
                        else {
                            //上传失败
                            var demoText = $('#test-upload-demoText');
                            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                            demoText.find('.demo-reload').on('click', function () {
                                uploadInst.upload();
                            });
                        }
                    }
                    , error: function (res) {
                        console.log(res);
                        //演示失败状态，并实现重传
                        var demoText = $('#test-upload-demoText');
                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                        demoText.find('.demo-reload').on('click', function () {
                            uploadInst.upload();
                        });
                    }
                });

                //多图片上传
                var upload_multi = upload.render({
                    elem: '#test-upload-more'
                    , url: '/FileMerber/UpLoadFiles'
                    , multiple: true
                    , before: function (obj) {
                        //预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                            $('#test-upload-more-list').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                        });
                    }
                    , done: function (res) {
                        //上传完毕
                        if (res.flat == 1) {
                            //上传成功,修改数据库的数据
                            var data = updatefile(res.list);
                            layer.msg(data.message);
                        }
                        else {
                            //上传失败
                            
                        }
                    }
                    , error: function (res) {
                        console.log(res);
                        //演示失败状态，并实现重传
                        
                    }
                });

                //多文件列表示例
                var demoListView = $('#demoList')
                    , uploadListIns = upload.render({
                        elem: '#testList'
                        , url:'/FileMerber/UpLoadFiles' //改成您自己的上传接口
                        , accept: 'file'
                        , multiple: true
                        , auto: false
                        , bindAction: '#testListAction'
                        , choose: function (obj) {
                            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                            //读取本地文件
                            obj.preview(function (index, file, result) {
                                var tr = $(['<tr id="upload-' + index + '">'
                                    , '<td>' + file.name + '</td>'
                                    , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                                    , '<td>等待上传</td>'
                                    , '<td>'
                                    , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                                    , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                                    , '</td>'
                                    , '</tr>'].join(''));

                                //单个重传
                                tr.find('.demo-reload').on('click', function () {
                                    obj.upload(index, file);
                                });

                                //删除
                                tr.find('.demo-delete').on('click', function () {
                                    delete files[index]; //删除对应的文件
                                    tr.remove();
                                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                });

                                demoListView.append(tr);
                            });
                        }
                        , done: function (res, index, upload) {
                            //layer.msg(res.messag);
                            if (res.flat == 1) {
                                //上传成功,修改数据库的数据
                                var data = updatefile(res.list);
                                layer.msg(data.message);
                                if (data.result > 0) {
                                    var tr = demoListView.find('tr#upload-' + index)
                                        , tds = tr.children();
                                    //tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                                    tds.eq(3).html(''); //清空操作
                                }
                                return false;
                            }
                            else {
                                
                                //上传失败
                                var tr = demoListView.find('tr#upload-' + index)
                                    , tds = tr.children();
                                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                            }
                           
                            this.error(index, upload);
                        }
                        , error: function (res,index, upload) {
                            console.log(res);
                            var tr = demoListView.find('tr#upload-' + index)
                                , tds = tr.children();
                            tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                        }
                    });

                function updatefile(list) {
                    var real_data = "";
                    $.ajax({
                        url: "/FileMerber/updateFile",    //请求的url地址
                        dataType: "json",   //返回格式为json
                        async: false,//请求是否异步，默认为异步，这也是ajax重要特性$("#attachCode").val()
                        data: { arg: JSON.stringify(list), attachcode: "12345678", operation: 'update' },    //参数值
                        type: "POST",   //请求方式
                        success: function (data) {
                            //console.log(data);
                            real_data = data;
                            
                        },

                        error: function (res) {
                            console.log(res);
                            layer.msg("项目添加失败，请联系技术人员");
                        }
                    });
                    return real_data;
                };

            });

            //接收父页面传递过来的attachcode
            function GetParentCode(attachcode) {
                $("#attachCode").val(attachcode);
            };
        </script>
</body>
</html>